<template>
  <div class="login-wrapper">
    <div class="modal-content">
      <el-form 
      ref="formRef"
      :model="ruleForm"
      :rules="rules"
      status-icon
      >
        <div class="title">车辆管理系统</div>
        <el-form-item prop="userName">
            <el-input type="text" 
            placeholder="用户名" 
            prefix-icon="UserFilled"
            v-model="ruleForm.username"
            ></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" 
            placeholder="用户密码" 
            prefix-icon="view"
            v-model="ruleForm.password"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" class="btn-primary" @click="submitForm(formRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script  setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { loginApi ,loginInfo} from '../api/login';
//引入加密模块
import { encryption } from "../utils/utils";

import { ElMessage } from 'element-plus'

const ruleForm = reactive({
    username: "",
    password: ""
});
//获取form的DOM对象
const formRef = ref();
const route = useRouter();
// const store = useStore();

const rules = reactive({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: '用户名称3-5个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 12, message: '密码6-12个字符', trigger: 'blur' },
    ]
});

const submitForm = (formEl) => {
    if (!formEl) return
    // console.log(ruleForm)
    formEl.validate((valid) => {
        if (valid) {

            // if( ruleForm.username === 'admin' && ruleForm.password === '123456'){
            //         localStorage.setItem('isLoggedIn', 'true');
            //         // this.isLoggedIn = true;
            //         route.push('/welcome')
            //     }else{
            //         ElMessage.error('请输入正确的用户名和密码')
            //     }

           const user = encryption({
               // data: this.login,
               data: {
                 username: ruleForm.username,
                 password: ruleForm.password,
               },
               key: "Base64",
               param: ["password"]
            });
           
            // res   正常的链接 
            loginApi(user).then(res => {
                loginInfo(res.data.access_token).then(result =>{
                    if(result.status == 200){
                        console.log(result.data.data)
                        localStorage.setItem('token', res.data.access_token);
                        localStorage.setItem('username', result.data.data.sysUser.username);
                        route.push("/welcome");
                    }
                }).catch(err =>{
                    console.log(err)
                    ElMessage.error('请输入正确的用户名和密码')
                    formEl.resetFields();
                })
                // const { code } = res.data;  //20001
                // if (res.status === 200) {
                //     // store.commit("saveUserInfo", res.data);
                //     route.push("/welcome");
                // }
            }).catch(()=>{
                ElMessage.error('网络请求失败')
                formEl.resetFields();
            })
        } else {
             ElMessage.error('请输入正确的用户名和密码')
            // console.log('error submit!')
            return false
        }
    })
}



</script>

<style scoped>
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #eee;
    /* padding:20px; */
}

.modal-content {
    max-width: 300px;
    padding: 50px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px 3px #999;
}

.title {
    font-size: 40px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 30px;
}

.btn-primary {
    width: 100%;
    height: 40px;
}
@media screen {
    
}
</style>